<template>
  <view class="cul-wrapper" :data-theme="globPrimary">
    <!--这里减掉的308为操作栏的高度和内边距之和-->
    <scroll-view
      :style="{ height: scrollHeight - 380 + 'px' }"
      scroll-y
      :scroll-into-view="scrollIndex"
      scroll-with-animation
    >
      <block v-for="(msg, index) in msgs" :key="index">
        <view
          :class="[msg.isme ? 'msg-me' : 'msg-service']"
          :id="'msg-' + index"
        >
          <image
            class="avatar"
            v-if="!msg.isme"
            :src="msg.user_avatar"
            lazy-load
          ></image>
          <view class="msg-wrap">
            <view class="avatar-name">{{ msg.user_name }}</view>
            <view class="msg-text">
              <view class="msg-text-content">
                <text>{{ msg.data }}</text>
              </view>
            </view>
          </view>
          <image
            class="avatar"
            v-if="msg.isme"
            :src="msg.user_avatar"
            lazy-load
          ></image>
        </view>
      </block>
    </scroll-view>
    <view class="operation">
      <view class="shop_block">
        <!-- <image class="shop_img" @click="openMoney" src="../../../../static/images/course/live_dashang.png"></image> -->
        <image
          class="shop_img"
          @click="openShop"
          style="margin-left: 16rpx; margin-right: 27rpx"
          src="../../../../static/images/course/live_store.png"
        ></image>
      </view>
      <input
        type="text"
        v-model="msgInput.msg1"
        :placeholder="inputTips"
        class="msg-input3"
        :disabled="noTalk"
      />
      <view @tap="sub2(msgInput.msg1)" class="send_btn">发送</view>
    </view>

    <!-- 商场弹窗 -->
    <u-popup v-model="couponShop" mode="bottom" border-radius="34" height="789">
      <view class="shop">
        <view class="shop_title">课程列表</view>
        <scroll-view
          scroll-y="true"
          class="scrollY"
          style="height: 600rpx; width: 100%"
        >
          <edu-empty v-if="isDataEmpty"></edu-empty>
          <view
            class="shop_item"
            v-for="(item, index) in course_list"
            :key="index"
          >
            <view class="re_img">
              <image :src="item.cover_url"></image>
              <view>{{ item.course_type_text }}</view>
            </view>

            <view class="shop_introduce">
              <view class="shop_name u-line-2">{{ item.title }}</view>
              <view class="shop_bottom">
                <view class="shop_money">{{
                  item.price | formatCurrency
                }}</view>
                <view class="shop_btn" @click="goPay(item.id)">去抢购</view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </u-popup>
    <!-- 打赏弹窗 -->
    <u-popup
      v-model="couponMoney"
      mode="bottom"
      border-radius="34"
      height="617"
    >
      <view class="money">
        <view class="money_title">打赏</view>
        <view class="money_item">
          <view
            class="money_num"
            v-for="(i, index) in money_list"
            :key="index"
            :class="[choseId == index ? 'new_class' : '']"
            @click="choseMon(index)"
          >
            <view class="mon_txt" :class="[choseId == index ? 'new_color' : '']"
              >打赏</view
            >
            <view
              class="mon_num"
              :class="[choseId == index ? 'new_color' : '']"
              >{{ i | formatCurrency }}</view
            >
          </view>
        </view>
        <view class="other">其他金额</view>
        <view class="ipt_box">
          ￥<input type="number" maxlength="6" v-model="money_num" />
        </view>
        <view class="money_btn">确认打赏</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import courseImage from "../../../../components/common/courseImage.vue";
import { mapGetters } from "vuex";
export default {
  components: {
    courseImage,
  },
  name: "CulChat",
  props: {
    //聊天窗体高度
    scrollHeight: {
      type: [Number, String],
      default() {
        let height = 0;
        //调用uni-app接口获取屏幕高度
        uni.getSystemInfo({
          //成功回调函数
          success(res) {
            //windoHeight为窗口高度，主要使用的是这个
            height = res.windowHeight;
          },
        });
        return height;
      },
    },
    meAvatar: {
      type: String,
    },
    anotherAvatar: {
      type: String,
    },
    anotherMsg: {
      type: Object,
    },
    noTalk: {
      type: Boolean,
      default: false,
    },
    sid: {
      type: [String, Number],
    },
  },
  data() {
    return {
      //控制按钮和文本框样式和功能的转换
      conversion: true,
      msgInput: {
        msg1: "",
        msg2: "",
      },
      //消息列表
      msgs: [],
      //滚动位置
      scrollIndex: "",
      couponShop: false,
      couponMoney: false,
      isDataEmpty: false,
      course_list: [],
      choseId: 0,

      money_list: [1, 2, 5, 10, 20],
      money_num: "",

      inputTips: "向老师提问~",
    };
  },
  computed: {
    ...mapGetters({
      userInfo: "user/getUserInfo",
    }),
  },
  watch: {
    anotherMsg(val) {
      this.init();
    },
    money_num(val) {
      if (val != "") {
        this.choseId = -1;
      }
    },
    noTalk(val) {
      this.inputTips = val == true ? "禁言中" : "向老师提问~";
    },
  },
  methods: {
    init() {
      this.msgs.push(this.anotherMsg);
      this.jumpScroll();
    },
    //滚动到指定位置
    jumpScroll() {
      //滚动到指定位置之前首先清空scrollIndex的值，否则只能滚动一次，再次调用就会失效
      this.scrollIndex = "";
      this.$nextTick(function () {
        this.scrollIndex = "msg-" + (this.msgs.length - 1);
      });
    },
    sub1(val) {
      if (!this.conversion) {
        this.sub(val);
      }
    },
    sub2(val) {
      this.sub(val);
    },
    sub(val) {
      let _self = this;
      if (val) {
        //清空输入框中的文字
        this.msgInput.msg1 = "";
        this.msgInput.msg2 = "";
        let msg = {
          isme: true,
          data: val,
          user_name: _self.userInfo.nick_name,
          user_avatar: _self.userInfo.avatar_url,
        };
        this.msgs.push(msg);
        this.conversion = !this.conversion;
        this.jumpScroll();
        this.$emit("submit", {
          message: val,
          user_name: _self.userInfo.nick_name,
          user_avatar: _self.userInfo.avatar_url,
          callback: (m) => {
            let anotherMsg = {
              isme: false,
              data: m,
            };
            _self.msgs.push(anotherMsg);
            _self.jumpScroll();
          },
        });
      } else {
        this.conversion = !this.conversion;
        this.jumpScroll();
      }
    },
    openShop() {
      var that = this;
      this.couponShop = true;
      that.$edu.api.getLiveCourse({ section_id: that.sid }).then((res) => {
        if (res.data.length == 0) {
          that.course_list = [];
          that.isDataEmpty = true;
        } else {
          that.isDataEmpty = false;
          that.course_list = res.data;
        }
      });
    },
    openMoney() {
      this.couponMoney = true;
    },
    choseMon(index) {
      this.choseId = index;
    },
    //购买课程
    goPay(id) {
      this.$u.route("/pageCourse/course/details", { id: id });
      this.$emit("destoryRoom", true);
    },
  },
};
</script>

<style scoped lang="scss">
* {
  box-sizing: border-box;
  overflow: hidden;
}
.cul-wrapper {
  width: 100vw;
  padding: 0 35rpx;
  margin-top: 10px;
  box-sizing: border-box;
  background-color: #f7f7f7;
  overflow: hidden;
}

.msg-me,
.msg-service {
  display: flex;
  align-items: flex-start;
  width: 680rpx;
  margin: 30rpx 0;
  box-sizing: border-box;
  overflow: hidden;
}

.msg-me {
  justify-content: flex-end;
}

.msg-service {
  justify-content: flex-start;
}
.join_room {
  display: table;
  margin: 0 auto;
  color: #909399;
  font-size: 24rpx;
  padding: 11rpx 35rpx;
  border-radius: 27rpx;
  text-align: center;
  background-color: #eeeeee;
}

.avatar {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
}

.msg-text {
  width: 560rpx;
}

.msg-wrap {
  width: 560rpx;
}

.msg-me > .msg-wrap > .avatar-name {
  text-align: right;
  margin-right: 10px;
  font-size: 13rpx;
  color: #909399;
  margin-bottom: 12rpx;
}

.msg-service > .msg-wrap > .avatar-name {
  margin-left: 10px;
  font-size: 13rpx;
  color: #909399;
  margin-bottom: 12rpx;
}

.msg-me > .msg-wrap > .msg-text {
  display: flex;
  justify-content: flex-end;
}

.msg-text-content {
  line-height: 35rpx;
  display: inline-block;
  box-sizing: border-box;
  padding: 15rpx 19rpx;
  font-size: 28rpx;
}

.msg-me > .msg-wrap > .msg-text > .msg-text-content {
  margin-left: 70rpx;
  background-color: #ffffff;
  border: 1rpx solid #d5e0e5;
  border-radius: 12rpx;
  margin-right: 15rpx;
  color: #303133;
  font-size: 26rpx;
  letter-spacing: 1px;
}

.msg-service > .msg-wrap > .msg-text > .msg-text-content {
  color: #303133;
  margin-left: 15rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
  margin-right: 70rpx;
}

.operation {
  display: flex;
  position: fixed;
  left: 0;
  bottom: 0;
  align-items: center;
  background: #ffffff;
  padding: 10px 35rpx;
  border-top: 1rpx solid rgba(184, 184, 184, 0.1);
  width: 100vw;
}

.conversion {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.shop_block {
  height: 80rpx;
  display: flex;
  align-items: center;
}

.shop_img {
  height: 56rpx;
  width: 56rpx;
}

.send_btn {
  height: 80rpx;
  line-height: 80rpx;
  font-size: 32rpx;
  color: #909399;
}

.msg-input3 {
  height: 80rpx;
  // width: 434rpx;
  width: 480rpx;
  border-radius: 39rpx;
  margin-right: 16rpx;
  padding: 0 20rpx;
  background-color: #f7f7f7;
  border: 1rpx solid rgba(0, 0, 0, 0.1);
}

.msg-input1 {
  background: #ffffff;
  height: 80rpx;
  width: 520rpx;
  border-radius: 20rpx;
  padding: 0 20rpx;
  border: 1rpx solid rgba(0, 0, 0, 0.1);
}

.msg-input2 {
  display: flex;
  align-items: center;
  width: 140rpx;
  margin-left: 30rpx;
  height: 40px;
  background-color: #007aff;
  background-image: url("");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 20px 20px;
  border-radius: 10px;
  /*这个颜色是因为组件位置交换的时候，字体会有一瞬间继续留在框内，这里把内容变为透明即可*/
  color: rgba(0, 0, 0, 0);
}

.shop {
  padding: 30rpx 30rpx 10rpx 30rpx;
  .shop_title {
    height: 45rpx;
    line-height: 45rpx;
    text-align: center;
    font-size: 32rpx;
    color: #303133;
    font-weight: bold;
    margin-bottom: 44rpx;
  }
  .shop_item {
    height: 172rpx;
    width: 100%;
    margin-bottom: 41rpx;
    display: flex;
    .re_img {
      height: 100%;
      width: 307rpx;
      position: relative;
      image {
        height: 100%;
        width: 100%;
        position: absolute;
      }
      view {
        height: 36rpx;
        width: 64rpx;
        font-size: 22rpx;
        line-height: 36rpx;
        color: #ffffff;
        background-color: #ff7272;
        position: absolute;
        top: 16rpx;
        right: 0;
        text-align: center;
        border-radius: 100rpx 0rpx 0rpx 100rpx;
      }
    }

    .shop_introduce {
      height: 100%;
      width: 51%;
      margin-left: 25rpx;
      .shop_name {
        height: 80rpx;
        width: 100%;
        font-size: 30rpx;
        color: #303133;
        font-weight: bold;
        line-height: 40rpx;
      }
      .shop_bottom {
        height: 50rpx;
        width: 100%;
        margin-top: 40rpx;
        display: flex;
        justify-content: space-between;
        .shop_money {
          font-size: 30rpx;
          color: #f54030;
          line-height: 50rpx;
        }
        .shop_btn {
          height: 50rpx;
          width: 135rpx;
          @include bg-color();
          text-align: center;
          line-height: 50rpx;
          color: #ffffff;
          font-size: 30rpx;
          border-radius: 25rpx;
        }
      }
    }
  }
}

.money {
  padding: 30rpx 30rpx 10rpx 30rpx;
  .money_title {
    height: 45rpx;
    line-height: 45rpx;
    text-align: center;
    font-size: 32rpx;
    color: #303133;
    font-weight: bold;
    margin-bottom: 44rpx;
  }
  .money_item {
    height: 128rpx;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .money_num {
      height: 124rpx;
      width: 124rpx;
      border-radius: 10rpx;
      box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(255, 114, 114, 0.1),
        0rpx 0rpx 14rpx 0rpx rgba(255, 114, 114, 0.3);
      background: #fdfdfd;
      overflow: hidden;
      .mon_txt {
        height: 37rpx;
        width: 100%;
        text-align: center;
        font-size: 26rpx;
        color: #f54030;
        font-weight: bold;
        margin-top: 35rpx;
      }
      .mon_num {
        font-size: 24rpx;
        color: #f54030;
        width: 100%;
        text-align: center;
        margin-top: 8rpx;
      }
    }
  }
  .other {
    height: 40rpx;
    color: #606266;
    font-size: 28rpx;
    line-height: 40rpx;
    margin-top: 40rpx;
  }
  .ipt_box {
    height: 88rpx;
    width: 265rpx;
    border: 2rpx solid #dcdfe6;
    border-radius: 6rpx;
    margin-top: 25rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b7bac1;
    input {
      height: 80rpx;
      width: 72%;
      border: none;
      outline: none;
      color: #f54030;
      font-size: 36rpx;
      font-weight: bold;
      margin-left: 3%;
    }
  }
  .money_btn {
    height: 72rpx;
    width: 640rpx;
    border-radius: 36rpx;
    @include bg-color();
    line-height: 72rpx;
    font-size: 32rpx;
    text-align: center;
    color: #ffffff;
    margin: 63rpx auto 0;
  }
}
.new_class {
  background: #ff7272 !important;
}
.new_color {
  color: #ffffff !important;
}
</style>
